import React from 'react';
import Baselist from 'components/Baselist';
import {Row, Form, Input,Button} from 'antd';

const FormItem = Form.Item;
import API, {GET_CSRF_TOKEN,EDIT_MERCHANT,SAVE_MERCHANT} from 'lib/api';

import {redirect,backward} from 'lib/utils.js';
import './style.less';
import Crumb from "components/Crumb";






class Add extends React.Component {

    constructor(props) {
        super(props);

    }

    state = {
        visible:false,
        privs:[],
        defaultExpandAll:true,
        checkedKeys: [],
        info:{},

        crumb:[
            {
                'href': '/',
                'title': '首页',
            },
            {
                'href': '/merchant',
                'title': '商家用户'
            },
            {
                'title': '添加/编辑'
            }
        ]
    };





    componentDidMount() {
        const {id} = this.props.routeParams;

        if(id){
            API.fetch(EDIT_MERCHANT,{id:id},resp=>{
                this.props.form.setFieldsValue({
                    mobile: resp.mobile,
                });
                this.setState({
                    info:resp,
                    checkedKeys:resp.privs
                })
            })
        }


        API.fetch(GET_CSRF_TOKEN,{},resp =>{
            this.setState({
                _token:resp
            })
        })

    }



    //表单提交
    submit(e) {
        e.preventDefault();

        const {checkedKeys,info,_token} = this.state;
        this.props.form.validateFields((err, fieldsValue) => {

            if (err) {
                return;
            }

            if(info.id){
                fieldsValue.id = info.id;
            }

            fieldsValue._token = _token;
            API.post(SAVE_MERCHANT,fieldsValue,resp=>{
                redirect("/merchant")
            })

        });
    }

    render() {

        const {getFieldDecorator} = this.props.form;
        const {info} = this.state;

        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 4},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 16},
            },
        };

        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 14,
                    offset: 4,
                },
            },
        };


        return (
            <Baselist>
                <Crumb crumb={this.state.crumb} />
                {/* table */}
                <Row gutter={24} style={{borderRadius: '8px', margin: 0, background: '#fff', minHeight: 500}}>
                    <Row className="head">
                        添加商家用户
                    </Row>

                    <Form onSubmit={this.submit.bind(this)}>
                        <FormItem
                            {...formItemLayout}
                            label="账号"
                            hasFeedback
                        >
                            {getFieldDecorator('mobile', {
                                rules: [
                                    {
                                        required: true, message: '请输入正确的手机号',
                                    },
                                    {
                                        max:11,message:'请输入正确的手机号',
                                        min:11,message:'请输入正确的手机号'
                                    }
                                ],
                            })(
                                <Input disabled={info.id?true:false} placeholder="请输入账号" />
                            )}
                        </FormItem>
                        {
                            info.id?
                                <FormItem
                                    {...formItemLayout}
                                    label="密码"
                                    hasFeedback
                                >
                                    {getFieldDecorator('pass', {
                                        rules: [
                                            {
                                                max:16,message:'密码最大长度为16',
                                                min:6,message:'密码至少6位数',
                                            }
                                        ],
                                    })(
                                        <Input type="pass"  placeholder="请输入密码" />
                                    )}
                                </FormItem>
                                :
                                <FormItem
                                    {...formItemLayout}
                                    label="密码"
                                    hasFeedback
                                >
                                    {getFieldDecorator('pass', {
                                        rules: [
                                            {
                                                required: true, message: '请输入密码',
                                            },
                                            {
                                                max:16,message:'密码最大长度为16',
                                                min:6,message:'密码至少6位数',
                                            }
                                        ],
                                    })(
                                        <Input type="pass"  placeholder="请输入密码" />
                                    )}
                                </FormItem>

                        }



                        <FormItem {...tailFormItemLayout}>
                            <Button type="primary" htmlType="submit">保存</Button>
                        </FormItem>
                    </Form>
                </Row>
            </Baselist>
        )
    }

}

export default Form.create()(Add);



